"use client";

import { useRouter } from "next/navigation";
import { twMerge } from 'tailwind-merge';
import { RxCaretLeft, RxCaretRight } from 'react-icons/rx';
import { HiHome } from 'react-icons/hi';
import { BiSearch } from 'react-icons/bi';
import { FaUserAlt } from 'react-icons/fa';
import { useSupabaseClient } from '@supabase/auth-helpers-react';
import { toast } from 'react-hot-toast';

import Button from "@/components/Button";
import useAuthModal from "@/hooks/useAuthModal";
import { useUser } from "@/hooks/useUser";

interface HeaderProps {
  children: React.ReactNode;
  className?: string;
}

const Header: React.FC<HeaderProps> = ({
  children, 
  className 
}) => {
  const authModal = useAuthModal();
  const router = useRouter();
  const supabaseClient = useSupabaseClient();
  const { user } = useUser();

  //登出操作
  const handleLogout = async() => {
    const { error } = await supabaseClient.auth.signOut();
    //待办：假如有歌曲正在播放，注销时会被关闭
    router.refresh();
    if(error){
      toast.error(error.message);
    }else{
      toast.success("登出成功");
    };
  }

  return (
    // 内容区域的标题组件区域
    <div className={twMerge(`
      h-fit
      p-6
    `, className)}>
      <div className="
        w-full
        mb-4
        flex
        items-center
        justify-between
      ">
        {/* 大屏幕设备显示的标题 */}
        <div className="
          hidden
          md:flex
          gap-x-2
          items-center
        ">
          {/* 后退按钮 */}
          <button onClick={() => router.back()} className="
            rounded-full
            bg-black
            opacity-50
            items-center
            justify-center
            cursor-pointer
            hover:opacity-75
            transition
          ">
            <RxCaretLeft className="text-white" size={35}/>
          </button>
          {/* 前一页按钮 */}
          <button onClick={() => router.forward()} className="
            rounded-full
            bg-black
            opacity-50
            items-center
            justify-center
            cursor-pointer
            hover:opacity-75
            transition
          ">
            <RxCaretRight className="text-white" size={35}/>
          </button>
        </div>
        {/* 移动端设备显示的标题 */}
        <div className="
          flex
          md:hidden 
          gap-x-2
          items-center
        ">
          {/* 主页按钮 */}
          <button className="
            rounded-full
            p-2
            bg-white
            flex
            items-center
            justify-center
            opacity-50
            hover:opacity-75
            transition
          ">
            <HiHome className="text-black" size={20}/>
          </button>
          {/* 搜索按钮 */}
          <button className="
            rounded-full
            p-2
            bg-white
            flex
            items-center
            justify-center
            opacity-50
            hover:opacity-75
            transition
          ">
            <BiSearch className="text-black" size={20}/>
          </button>
        </div>
        {/* 标题右侧的登陆登出按钮 */}
        <div className="
          flex
          justity-between
          items-center
          gap-x-4
        ">
          {/* 根据登录状态进行登录按钮的显示与隐藏 */}
          { user ? (
            // 已经登录时
            <div className="
              flex
              gap-x-4
              items-center
            ">
              {/* 登出按钮 */}
              <Button
                onClick = {handleLogout}
                className="
                  bg-white
                  px-6
                  py-2
                  w-30
                "
              >登出</Button>
              {/* 用户信息按钮 */}
              <Button
                onClick={() => router.push('/account')}
                className="
                  bg-white
                  w-10
                "
              >
                <FaUserAlt/>
              </Button>
            </div>
          ) : (
            // 未登录时
            <>
            {/* 注册按钮 */}
            <div>
              <Button 
                onClick = {authModal.onOpen} 
                className="
                  bg-transparent
                  text-neutral-300
                  font-medium
                "
              >
                注册
              </Button>
            </div>
            {/* 登陆按钮 */}
            <div>
              <Button 
                onClick = {authModal.onOpen}
                className="
                  bg-white
                  px-6
                  py-2
                "
              >
                登录
              </Button>
            </div>
          </>
          )}

        </div>
      </div>
      { children }
    </div>
  )
}

export default Header;